<template>
  <div class="detail-list">
      <div class="detail-text border-bottom">
           <i class="iconfont text-icon">&#xe65f;</i>
          班级信息</div>
      <ul>
          <li class="student border-bottom">
              <i class="iconfont student-icon">&#xe630;</i>
              学生人数：{{this.total}}</li>
          <li class="teacher border-bottom">
              <i class="iconfont teacher-icon">&#xe6a7;</i>
              辅导员：{{this.teacher}}</li>
          <li class="teacher-phone border-bottom">
              <i class="iconfont phone-icon">&#xe61d;</i>
              联系方式：{{this.tphone}}</li>
      </ul>
      <router-link to="/student" tag="div" class="student-detail">学生详情</router-link> 
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'homedetail',
  props:{
      allclass:Object
  },
  computed:{
      ...mapState(['class','total','teacher','tphone'])
  }
}
</script>

<style scoped>
    .detail-list{
        margin: auto;
        height: 0;
        width:  98%;
        padding-bottom: 56%;
        background:linear-gradient( rgb(200, 214, 233), #eeeeee);
        border-radius: .06rem;
    }
    .text-icon{
        font-size: .36rem;
    }
    .detail-text{
        height: .6rem;
        line-height: .6rem;
        font-size: .32rem;
        text-align: center;
        background:linear-gradient( rgb(84, 166, 221), #9198e5)
    }
    .student{
        height: .8rem;
        line-height: .8rem;
        font-size: .36rem;
        text-indent: .36rem;
        border-bottom: 1px solid rgb(255, 255, 255);
    }
    .student-icon{
        font-size: .4rem;
        margin-right: .2rem;
    }
    .teacher{
        height: .8rem;
        line-height: .8rem;
        font-size: .36rem;
        text-indent: .36rem;
        border-bottom: 1px solid rgb(255, 255, 255);
    }
    .teacher-icon{
        font-size: .4rem;
        margin-right: .2rem;
    }
    .teacher-phone{
        height: .8rem;
        line-height: .8rem;
        font-size: .36rem;
        text-indent: .36rem;
        border-bottom: 1px solid rgb(255, 255, 255);
    }
    .phone-icon{
        font-size: .4rem;
        margin-right: .2rem;
    }
    .student-detail{
        position: relative;
        float: right;
        right: 0;
        bottom: 0rem;
        height: .6rem;
        line-height: .6rem;
        width: 1.5rem;
        color: rgb(226, 123, 38);
        font-size: .32rem;
        text-decoration: underline;
    }
    
</style>